<template>
  <el-dialog
    v-model="dialogFormVisible"
    :close-on-click-modal="false"
    :title="title"
    width="500px"
    @close="close"
  >
    <vab-query-form>
      <vab-query-form-top-panel>
        <el-form :inline="true" @submit.prevent>
          <el-form-item>
            <el-button type="primary" @click="handleAdd()">
              添加客服接待
            </el-button>
            <el-button type="danger" @click="handleDelete($event)">
              删除
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-top-panel>
    </vab-query-form>
    <el-table
      v-loading="listLoading"
      :border="border"
      :data="list"
      :height="height"
      :stripe="stripe"
      @selection-change="setSelectRows"
    >
      <el-table-column align="center" type="selection" width="60" />
      <el-table-column
        v-for="(item, index) in finallyColumns"
        :key="index"
        align="center"
        :label="item.label"
        :prop="item.prop"
        :show-overflow-tooltip="true"
        :sortable="item.sortable"
        width="auto"
      >
        <template #default="{ row }">
          <span v-if="item.prop == 'userid'">
            {{ userTypeFun(row[item.prop]) }}
          </span>
          <span v-else>{{ row[item.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="130">
        <template #default="{ row }">
          <el-button
            class="but_text"
            text
            type="primary"
            @click="handleDelete(row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="暂无数据" />
      </template>
    </el-table>
    <EditServicer ref="editServicerRef" @fetch-data="weComSerListData" />
  </el-dialog>
</template>

<script>
  import {
    getWeComServicerList,
    getWeComUserList,
    doWeComServicerDel,
  } from '@/api/enterpriseWeChat/weCom'
  export default defineComponent({
    name: 'TableSerListEdit',
    components: {
      EditServicer: defineAsyncComponent(() => import('./TableServicerEdit')),
    },
    setup() {
      const $baseConfirm = inject('$baseConfirm')
      const $baseMessage = inject('$baseMessage')
      const state = reactive({
        editServicerRef: null,
        title: '',
        corp_id: '',
        open_kfid: '',
        selectRows: '',
        columns: [
          {
            label: '客服',
            prop: 'userid',
          },
        ],
        list: [],
        weComUserList: [],
        border: true,
        height: 400,
        stripe: false,
        listLoading: true,
        dialogFormVisible: false,
      })
      const finallyColumns = computed(() => {
        return state.columns
      })
      const setSelectRows = (val) => {
        state.selectRows = val
      }
      const showEdit = async (corp_id, open_kfid) => {
        state.title = '客服接待列表'
        state.corp_id = corp_id
        state.open_kfid = open_kfid
        weComUserListData()
        weComSerListData()
        state.dialogFormVisible = true
      }
      const weComUserListData = async () => {
        const { data } = await getWeComUserList({ corp_id: state.corp_id })
        state.weComUserList = data
      }
      const weComSerListData = async () => {
        const { data } = await getWeComServicerList({
          corp_id: state.corp_id,
          open_kfid: state.open_kfid,
        })
        console.log(data)
        state.list = data
        state.listLoading = false
      }
      const userTypeFun = (row) => {
        let str = ''
        state.weComUserList.map((item) => {
          if (item.userid == row) {
            str = item.name
          }
        })
        return str
      }
      const handleAdd = () => {
        state['editServicerRef'].showEdit(
          state.weComUserList,
          state.corp_id,
          state.open_kfid
        )
      }
      const handleDelete = (row) => {
        if (row.userid) {
          const user_id_list = []
          user_id_list.push(row.userid)
          $baseConfirm('你确定要删除当前项吗', null, async () => {
            const { message } = await doWeComServicerDel({
              corp_id: state.corp_id,
              open_kfid: state.open_kfid,
              user_id_list: user_id_list,
            })
            $baseMessage(message, 'success', 'vab-hey-message-success')
            await weComSerListData()
          })
        } else {
          if (state.selectRows.length > 0) {
            const userids = state.selectRows.map((item) => item.userid)
            $baseConfirm('你确定要删除选中项吗', null, async () => {
              const { message } = await doWeComServicerDel({
                corp_id: state.corp_id,
                open_kfid: state.open_kfid,
                user_id_list: userids,
              })
              $baseMessage(message, 'success', 'vab-hey-message-success')
              await weComSerListData()
            })
          } else {
            $baseMessage('未选中任何行', 'error', 'vab-hey-message-error')
          }
        }
      }
      const close = () => {
        state.list = []
        state.dialogFormVisible = false
      }
      return {
        ...toRefs(state),
        showEdit,
        close,
        finallyColumns,
        setSelectRows,
        userTypeFun,
        handleAdd,
        handleDelete,
        weComSerListData,
      }
    },
  })
</script>
<style lang="scss" scoped></style>
